markdown顯示功能加入

參考官方的demo內容，把我們自己的頁面增加預覽顯示markdown的功能。

有了基本框架，現在把Markdown功能加入到Blog新增頁面中。
可以參考官方網站的example。這是本次改版才出現的範例，還滿清楚容易了解的！（也省了我很多力氣XDD）

由官方釋出的範例程式碼，卡關了許久，猜測是某個javascript語法出問題。後來發現，原來他們有用兩組套件。後來發現在開發的時候要引入這兩個來源：

<script src="https://unpkg.com/marked@0.3.6"></script>
<script src="https://unpkg.com/lodash@4.16.0"></script>

然後把textarea的資料改成：

<textarea :value="content" @input="update"></textarea>

並且新增：

<div v-html="compiledMarkdown"></div>

所以整個divtag會變成

<div id="editor">
    <label>標題</label>
    <input type="text" v-model="title">
    <br>
    <label>內容</label>
    <textarea :value="content" @input="update"></textarea>
    <p>{{ title }}</p>
    <p>{{ content }}</p>
    <button v-on:click="add">存檔</button>
    <div v-html="compiledMarkdown"></div>
</div>

接著修改vue那邊，加上computed和update功能，所以會變成：

var vm = new Vue({
    el: "#editor",
    data: {
        content: "# test",
        title: "123"
    },
    computed: {
        compiledMarkdown: function () {
            return marked(this.content, { sanitize: true })
        }
    },
    methods: {
        update: _.debounce(function (e) {
            this.content = e.target.value
        }, 300)
    }
})

這樣就可以讓網頁中預覽Markdown囉！！

其中有些語法要講解

• :value：是v-bind:value的縮寫，其中v-bind可以縮寫成：「:」。同樣的@click則是v-on:click簡化而成。
• v-html：輸出純HTML的格式。
• computed：是把計算的東西放入Vue裡面。這邊可以取得editor裡面的參數，進行
• methods：而這個是放function的地方，我們可以定義各種function在這邊使用。

下一篇，開始做存檔作業